import styles from './index.module.less'
import avatar from '@/resource/home/avatar.png'
import { observer, useLocalObservable } from 'mobx-react'
import Store from './store'
import PersonModal from '@/components/Measurements/PersonModal'
import goldCoin from '@/resource/home/jinbi.png'
import IntroduceModal from '@/components/Measurements/IntroduceModal/index'
import { levelLIst } from './const'
import topLeft from '@/resource/home/topLeft.png'
// import topright from '@/resource/home/topright.png'
export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const styleList: Record<number, string> = {
        0: styles.first_pic,
        1: styles.second_pic,
        2: styles.third_pic,
        3: styles.fourth_pic,
        4: styles.fifth_pic,
    }

    return (
        <div className={styles.page}>
            <div className={styles.heard}>
                <div className={styles.gold_coin}>
                    <img src={goldCoin} />
                    <span>23</span>
                </div>
                <img src={avatar} onClick={() => store.changPersonModalVisible(true)} />
            </div>
            <div className={styles.content}>
                {store.sceneList.map((item, index) => {
                    return (
                        <div key={item.id} className={styleList[index]}>
                            <div className={styles.first_arrow}>
                                <img src={topLeft} />
                            </div>
                            <img src={item.is_player === '0' ? levelLIst[index].unPassImg : levelLIst[index].passImg} />

                            <div className={styles.title}>{item.name}</div>
                        </div>
                    )
                })}
            </div>

            <div className={styles.footer}>
                <div className={styles.left_view}>
                    <div className={styles.my_file}>我的档案</div>
                </div>
                <div className={styles.right_view}>
                    <div className={styles.badge}>成就徽章</div>
                </div>
            </div>
            <PersonModal
                visible={store.personModalVisible}
                onChange={() => store.changPersonModalVisible(false)}
                changeIntroduceModalVisible={() => {
                    store.personModalChangIntroduceModalVisible(true)
                }}
            />
            <IntroduceModal introduceVisible={store.introduceModalVisible} introduceOnChange={() => store.changIntroduceModalVisible(false)} />
        </div>
    )
})
